import styles from "@styles/active/activelist.module.less";

import React, { useState, useEffect } from "react";
import { Table, Space, message } from "antd";
import { withRouter } from "react-router-dom";

import Http from "@utils/api";
import { filMenuState, filMenuValue } from "@actions/data";

function ActivityList({ history, types, formdate }) {
  const [tableData, setTableData] = useState({});
  const [pagination, setPagination] = useState({ page: 1, pageSize: 10 });
  const [loading, setLoading] = useState(false);

  /** 调用“活动列表” */
  useEffect(() => {
    getActivityListData();

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pagination, types, formdate]);

  const getActivityListData = () => {
    Http.pageConditionQueryByCreatorId({
      ...pagination,
      ...filMenuValue(types),
      ...formdate,
    }).then(({ data }) => {
      setTableData(data);
      setLoading(false);
    });
  };

  /* 白名单title */
  const columns = [
    { title: "活动名称", dataIndex: "activityName", key: "activityName" },
    { title: "创建人", dataIndex: "creator", key: "creator" },
    { title: "创建时间", dataIndex: "gmtCreated", key: "gmtCreated" },
    {
      title: "活动时间",
      dataIndex: "startDate",
      key: "startDate",
      render: (text, record) => (
        <span>
          {text} ~ {record.endDate}
        </span>
      ),
    },
    {
      title: "活动状态",
      dataIndex: "activityStatus",
      key: "activityStatus",
      render: (text, record) =>
        record.isDraft ? (
          <span className={styles.isDraft}>草稿</span>
        ) : (
          <span className={styles["state_" + text]}>{filMenuState(text)}</span>
        ),
    },
    {
      title: "公开方式",
      dataIndex: "isEveryoneExpose",
      key: "isEveryoneExpose",
      render: (text, record) => (text ? "所有用户" : "白名单用户"),
    },
    {
      title: "操作",
      dataIndex: "activityBasicId",
      key: "activityBasicId",
      render: (text, record) => (
        <Space size="middle" className={styles.operation}>
          {record.isDraft ? (
            <span>
              <span onClick={() => handleEdits(text, record)}>编辑</span>
              <span onClick={() => handleDelete(text)}>删除</span>
            </span>
          ) : (
            <span onClick={() => handleDetail(record)}>详情</span>
          )}
        </Space>
      ),
    },
  ];

  const handleDetail = (v) => {
    console.info("详情", v);
    history.push({ pathname: "/createActivity/detail", state: v });
  };
  const handleEdits = (id, v) => {
    console.info("编辑", v);
    history.push({ pathname: "/createActivity/add", state: v });
  };
  const handleDelete = (v) => {
    console.info("删除", v);
    Http.batchDeleteActivity({
      activityBasicIds: [v],
    }).then((res) => {
      if (res.code === 200) {
        getActivityListData();
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    });
  };

  const filterParams = (pagination, params = {}) => {
    const filterArray = ["total", "current"];
    Object.keys(pagination)
      .filter((v) => !filterArray.includes(v))
      .map((v) => (params[v] = pagination[v]));
    let { current } = pagination;
    params.page = current;
    return params;
  };

  const handleTableChange = (pagination) => {
    setPagination(filterParams(pagination));
    setLoading(true);
  };

  return (
    <section className={styles.activeTablebox}>
      {tableData && tableData.rows ? (
        <Table
          columns={columns}
          dataSource={tableData.rows}
          pagination={{
            ...pagination,
            total: tableData.total,
            showTotal: () => `共 ${tableData.total}条`,
            showQuickJumper: true,
            showSizeChanger: true,
          }}
          rowKey={(record) => record.activityBasicId}
          loading={loading}
          onChange={handleTableChange}
        />
      ) : (
        <>无数据</>
      )}
    </section>
  );
}

export default withRouter(ActivityList);
